<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>土巴兔</title>
    <link rel="stylesheet" href="./font_3237096_pqmllez5bg/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .clearfix{
            content: "";
            display: block;
            clear: both;
        }

        a{
            text-decoration: none;
            color: #333;
        }

        .box{
            width: 100%; 
            margin: 0 auto;

        }
        /* 头部 */
        .haeder-box{
            width: 100%;
            height: 35px;
            background-color: #F5F5F5;
            margin: 0 auto;
            position: absolute;
        }
        .header{
            width: 1460px;
            height: 35px;
            background-color: #F5F5F5;
            margin: 0 auto;
            line-height: 35px;
            position: relative;
        }
        .site>i{
            display: inline-block;
            width: 11px;
            height: 15px;
            background-image: url(https://wbf3.t8tcdn.com/T8T.49bb5a3431d6ae969df7445ee32797d0.png);
            background-position: -192px -180px;
            
        }
        .login>.xian{
            width: 102px;
            height: 30px;
            text-align: center;
            display: inline-block;
            font-size: 12px;
            border-right: 0.1px solid #dddddd;
        }
        .login>.you{
            font-size: 12px;
            color: #ff782f;
        }
        .login i{
            display: inline-block;
            width: 10px;
            height: 7px;
            background-image: url(https://wbf3.t8tcdn.com/T8T.49bb5a3431d6ae969df7445ee32797d0.png);
        }
        .login em{
            font-size: 8px;
        }
        
        


        /* logo */
        .right-logo i{
            display: inline-block;
            width: 132px;
            height: 47px;
            background-image: url(https://wbf3.t8tcdn.com/T8T.49bb5a3431d6ae969df7445ee32797d0.png);
            margin-top: 20px;
            background-position: 0 -208px;
        }
        .left-logo img{
            display: inline-block;
            width: 145x;
            height: 51px;
            margin-top: 20px;
        }
        .header-box{
            width: 100%;
            border-bottom: 0.1px solid #dddddd;
        }
        .heade-nav{
            height: 80px;
            width: 1460px;
            margin: 0 auto;      
        }
        .logo{
            width: 289px;
            height: 80px;    
        }
        .header-nav-text{
            width: 766px;
            height: 80px;
            line-height: 80px;     
        }
        .header-nav-text a{
            margin-left: 46px;
            font-size: 16px;
        }
        .header-nav-text a:hover{
            color: #0DB469;
        }
        .search{
            width: 257px;
            height: 80px;
            
        }
        .search-login{
            width: 224px;
            height: 32px;
            /* background-color: tomato; */
            margin-top: 24px;
            line-height: 32px;
            padding-left: 5px;
            box-sizing: border-box;
            border: 0.1px solid #dddddd;
            padding: 1px 0;
        }
        .search-login>input{
            border: none;
            outline: none;
            width: 180px;
            height: 21px;
        }
        .search i{
            display: inline-block;
            width: 21px;
            height: 20px;
            background-image: url(https://wbf3.t8tcdn.com/T8T.49bb5a3431d6ae969df7445ee32797d0.png);
            background-position: -205px -219px;
            margin-left: 5px;
            margin-top: 2px;
        }
        

        /* 主页 */
        .home{
            width: 1226px;
            margin: 0 auto;
        }
        .left-home{
            width: 960px;
            margin-top: 30px;
        }
        .right-home{
            width: 240px;
            height: 1000px;
            background-color: yellow;
            margin-top: 30px;
        }


        /* 左半部分 */
        .left-item-box{
            width: 960px;
            border: 1px solid rgb(214, 214, 214);
        }

        .left-item-top{
            height: 50px;
            padding: 18px;
            box-sizing: border-box;
            background-color: rgb(255, 255, 255);
        }
        .build{
            height: 40px;
            line-height: 40px;
            border: 0.1px solid rgb(241, 241, 241);
        }
        .build-left{
            width: 80px;
            text-align: center;
            background-color: #F8F8F8;
        }
        .build-right>a{
            margin-left: 30px;
        }
        .ieam{
            width: 280px;
            height: 250px;
            background-color: #0DB469;
            position: absolute;
            top: 20px;
            right: 0;
            display: none;
        }
        .you{
            position: relative;
        }
        .you a:hover .item{
            display: block;
        }




    </style>
</head>
<body>
    <div class="box">
        <div class="haeder-box"></div>
            <div class="header clearfix">
                <div class="site left">
                    <i></i>
                    <a href="">深圳</a>
                    <a href="" style="color: #0DB469;">[切换]</a>
                </div>
                <div class="login right">
                    <a href="" style="font-size: 12px;">登录</a>
                    <a href="" class="xian"> 注册</a>
                    <a href=""  class="xian">我的土巴兔</a>
                    <i></i>
                    <a href=""  class="xian">商家中心</a>
                    <a href=""  class="xian">建材中心</a>
                    <a href=""  class="xian">创作者中心</a>
                    <a href=""  class="xian">图满意云设计</a>
                    
                    <a href="" class="you">咨询热线:</a>   
                    <a href="" class="you" style="text-decoration: underline;">4006-900-288
                        <div class="ieam">

                        </div>
                    </a>
                    <em class="iconfont icon-xiangxia"></em>
                    
                </div>   
            </div>
        </div>

        <!-- logo -->
    <div class="header-box">
        <div class="heade-nav">
            <div class="logo left clearfix">
                    <div class="right-logo left">
                        <i></i>
                    </div>
                    <div class="left-logo right">
                            <img src="https://pic50.t8tcdn.com/adcms/ad/815d5d2f160c31b148c6208bf7c37284.gif" alt="">
                    </div>
            </div>
            <div class="header-nav-text left">
                <a href="">首页</a>
                <a href="">效果图</a>
                <a href="#">装修公司</a>
                <a href="">装修攻略</a>
                <a href="">保障服务</a>
                <a href="">更多</a>
                <a href="">下载app</a>

            </div>

            <div class="search right">
                <div class="search-login">
                    <input type="text">
                    <i></i>
                </div>
            </div>
        </div>
        </div>

        <!-- 主页 -->
        <div class="home clearfix">
            <div class="left-home left">
                <div class="left-item-box">
                    <div class="left-item-top">
                        <a href="">深圳装修</a>
                        <i></i>
                        <a href="">深圳装修公司</a>
                        <i></i>
                        <span>共124结果</span>
                    </div>
                    <div class="build clearfix">
                        <div class="build-left left">
                            <a href="">施工方式</a>
                        </div>
                        <div class="build-right left">
                            <a href="" style="color: #0DB469;">全部</a>
                            <a href="">半包装修</a>
                            <a href="">全包装修</a>
                            <a href="">纯设计</a>
                            <a href="">软装</a>
                            <a href="">全屋装修</a>
                        </div>
                    </div>
                    <div class="build clearfix">
                        <div class="build-left left">
                            <a href="">类型</a>
                        </div>
                        <div class="build-right left">
                            <a href="" style="color: #0DB469;">全部</a>
                            <a href="">家装</a>
                            <a href="">工装</a>
                        </div>
                    </div>
                    <div class="build clearfix">
                        <div class="build-left left">
                            <a href="">服务区域</a>
                        </div>
                        <div class="build-right left">
                            <a href="" style="color: #0DB469;">全部</a>
                            <a href="">南山区</a>
                            <a href="">宝安区</a>
                            <a href="">福田区</a>
                            <a href="">龙岗区</a>
                            <a href="">罗湖区</a>
                            <a href="">盐田区</a>
                            <a href="">布吉街道</a>
                            <a href="">光明区</a>
                            <a href="">坪山区</a>
                        </div>
                    </div>
                    <div class="build clearfix">
                        <div class="build-left left">
                            <a href="">保障服务</a>
                        </div>
                        <div class="build-right left">
                            <a href="" style="color: #0DB469;">全部</a>
                            <a href="">
                                <input type="checkbox">先装修后支付
                            </a>
                            <a href="">
                                <input type="checkbox">正品辅材
                            </a>
                            <a href="">
                                <input type="checkbox">装修分期
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="right-home right">

            </div>

        </div>
    </div>
</body>
</html>